//这是main.js 是我们项目JS入口文件 css /js 等静态资源 同一通过main导入 避免在script src link 导入 拖慢网页加载速度，进行过多二次请求
//1.导入Jquery  ,ES6导入模块的方式 import *** ES6代码，浏览器无法解析,利用webpack 把main.js进行处理 输出的结果浏览器 能够识别


import './css/index.css'
import './css/index.less'
import './css/mui.min.css'

import Vue from 'vue'
import app from './app.vue'
//导入路由模块
import VueRouter from 'vue-router'
//手动https://gdp.alicdn.com/imgextra/i1/2215777223/TB2UkizcpXXXXcvXXXXXXXXXXXX_!!2215777223.jpg安装VueRouter
Vue.use(VueRouter)
import router from './router.js'
import store from './store/datastore.js'
import 'babel-polyfill'
import globalApi_ from './components/Global/Global.vue'
Vue.prototype.GLOBAL = globalApi_

import './css/comm.css'

import { Button } from 'mint-ui';
import { Swipe, SwipeItem } from 'mint-ui';

import {Navbar,TabItem} from 'mint-ui';
import { TabContainer, TabContainerItem } from 'mint-ui';
import { Popup } from 'mint-ui';
import { Lazyload } from 'mint-ui';

Vue.use(Lazyload);
Vue.component(Popup.name, Popup);
Vue.component(TabContainer.name, TabContainer);

Vue.component(TabContainerItem.name, TabContainerItem);

Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
import validate from './Validate'
Vue.use(validate)
import Utils from './js/common/Utils'
Vue.use(Utils)
import local from './local/local.js'
import Bscroll from 'better-scroll'
//import './js/mui.min.js'
var  vm = new Vue({
	el:"#app",
	data: {
		
	},
	mounted(){
		
	},
	store,
	router:router,
	render: c=> c(app)
})

//webpack命令 执行 的时候，做了以下几步
//1,首先 webpack 没有通过命令的形式，给它指定入口和 出口
//2.webpack就会去项目的根目录中，查找一个叫做 wepack.config.js 的配置文件
//3，找到配置文件webpack解析执行它，解析执行完后得到了配置文件中导出的配置对象
//4.当webpack拿到配置对象，拿到了指定 的入口 和 出口 ,然后进行 打包构建
//使用 webpack-dev-server 这个工具 实现自动打包编译的功能
//运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
//webpack-dev-server这个工具,如果想要正常运行,必需本地安装webpack,webpack-cli,webpack-dev-server低版本2.0
//帮我们打包生成的bundle.js并没有存放到物理磁盘中,直接托管到了电脑的内存中,所以我们在项目根目录找不到.

///bundle.js 处在内存中,把页面也放入内存 安装html-webpack-plugin 包npm

//webpack处理第三方文件类型过程
//1,发现这个要处理的文件不是JS文件去配置文件 查找有无对应第三方loader规则,有则调用对应loader处理,调用顺序从后往前调用;
//调用完毕吧处理的结果直接交给webpack进行打包合并,输出到bundle.js



//在webpack中，默认只能处理一部分ES6的新语法,一些更高级ES6/7,webpack是处理不了的，借助第三方loader转化为低级语法，
//Babel,转化，webpack 可以运行两套命令 ，
//第一套包: cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
//第二套包: cnpm i babel-preset-env babel-preset-stage-0 -D
//{test:/\.js$/,use:'babel-loader,exclude:/node_modules/'}
//排除node-modules,把node_modules 中所有的第三方JS文件排除掉，否则非常消耗CPU，打包速度慢

//webpack -o
//经过刚才的样式,webpack可以做什么事情
//1.webpack 可以处理JS问价可能的互相依赖关系
//2.webpack能够处理JS兼容问题,对高级的,(ES6)浏览器不能识别的语法转化为低级能够正常识别的语法

//webpack 默认只能打包处理JS类型的文件， 无法处理其他的类型文件
//如果要处理非JS文件 需手动安装一些第三方 loader加载器
//1.如果想要打包处理CSS文件需要安装cnpm i style-loader css-loader -D


//如何在webpack构建项目，使用vue进行开发
//1,安装vue包 npm i vue -S
//注意：在webpack中使用import Vue from 'vue' 导入的vue构造函数，功能不足，只提供了runtime-only 的方式，没有提供网页的使用方式

//包查找规则，1.找项目根目录有没有 nodel_modules的文件夹，在nodel_modules中根据包名，找对应的vue文件夹
//在vue 文件夹查找package.json 的包配置文件 ,查找一个main属性 入口JS 文件路径 common.js向外暴露一个  Vue对象
//注意：在webpack中使用import Vue from 'vue' 导入的vue构造函数，功能不足，只提供了runtime-only 的方式，没有提供网页的使用方式

//在普通网页如何使用vue
//1.script标签 引入 vue包
//2.在index页面 创建一个 id 为app div容器 
//3.通过new Vue(得到一个vm实例)


//默认webpack无法打包.vue文件 需要安装相关loader npm i vue-loader vue-template-compiler -D
//import Vue from 'vue' 
//包查找规则，1.找项目根目录有没有 nodel_modules的文件夹，在nodel_modules中根据包名，找对应的vue文件夹
//在vue 文件夹查找package.json 的包配置文件 ,查找一个main属性 入口JS 文件路径 common.js向外暴露一个  Vue对象 
//common 功能阉割。功能最全的是Vue.js


//Node向外暴露成员 module.exports = {} 导入模块 var 名称 = require('模块标识符')


//ES6 ,导入import 模块名称 from '模块标识符 '  import '表示路径'
//使用export default 和export 向外暴露成员 例如:.vue export default {...} 向外 暴露 data methods 或者通过 var obj={} export default obj等等    或者 导入的模块名称随意，  

//export default 在一个模块内部,只能向外暴露一次
//在babel-plugin-component的帮助下，我们可以导入我们实际需要的组件，
//Mint-ui是VUE技术封装出来的成套的组件库,MINTUI体验更好,只使用于	Vue
//
//MUI,Bootstrap 代码片段,提供配套的样式,和HTML代码端,可以用于任何项目.